<template>
  <!-- 我现在需要达到的目标是：我选取第一个容器然后配置了一个echart图标，我拖动放大ehcart的数据怎么根据不同的容器存储呢
       我点击图片的时候就向echartlist里面发送一个id然后
  -->
  <vue-draggable-resizable
    style="border: none"
    :w="options.list.w"
    :h="options.list.h"
    :x="options.list.x"
    :y="options.list.y"
    :draggable="changestatus"
    :resizable="changestatus"
    @dragging="EonDrag"
    @resizing="EonResize"
    @dragstop="EonDragstop"
    @resizestop="EonResizstop"
  >
    <div
      class="mychart"
      ref="MyChartDom"
      style="width: 100%; height: 100%"
    ></div>
  </vue-draggable-resizable>
</template>
<script>
import * as echarts from "echarts"; //引入图标

export default {
  data() {
    return {
      dragState: null,
      ChartDom: null,
      MyChart: null,
      echartdrag: false,
    };
  },

  watch: {
    options() {
      this.CreateChart();
    },
  },

  props: {
    changestatus: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Object,
      default: null,
    },
    width1: {
      type: Number,
      default: 300,
    },
    height1: {
      type: Number,
      default: 300,
    },
    x: {
      type: Number,
      default: 100,
    },
    y: {
      type: Number,
      default: 300,
    },
  },
  methods: {
    CreateChart() {
      this.ChartDom = this.$refs.MyChartDom; // 获取到你防止echart的Dom
      this.MyChart = echarts.init(this.ChartDom); // 实例化你的 echart 图
      setTimeout(() => {
        this.MyChart.setOption(this.options);
      }, 100);
    },

    sizechange() {
      // 修改 echart 大小
      this.MyChart.resize();
    },
    EonResize: function (x, y, width, height) {
      this.echartdrag = true;
      this.options.list.x = x;
      this.options.list.y = y;
      this.options.list.width = width;
      this.options.list.height = height;
      this.$emit("getechartdrag", this.echartdrag);
      this.MyChart.resize();
    },
    EonResizstop() {
      this.echartdrag = false;
      this.$emit("getechartdrag", this.echartdrag);
    },
    // 正在拖动的时候this.
    EonDrag: function (x, y) {
      this.options.list.x = x;
      this.options.list.y = y;
      this.dragState = true;
      this.$emit("getDragState", this.dragState);
    },
    // 拖拽结束的事件
    EonDragstop() {
      this.dragState = false;
      this.$emit("getDragState", this.dragState);
      this.dragState = null;
    },
  },
  mounted() {
    // 页面初始化后执行
    this.$nextTick(() => {
      this.CreateChart();
    });
  },
};
</script>
<style>
</style>
